<template>
  <view class="container">
    <cu-custom bg-color="bg-gradual-blue-dark">
      <block slot="left">
        <view class="action">
          <view class="cu-load load-cuIcon" :class="!isLoad ? 'loading' : 'over'"></view>
        </view>
      </block>
      <block slot="content">服务</block>
      <block slot="right">
        <view class="action">
          <view class="cu-load load-cuIcon" :class="!isLoad ? 'loading' : 'over'"></view>
        </view>
      </block>
    </cu-custom>
    <swiper
      class="screen-swiper"
      :class="dotStyle ? 'square-dot' : 'round-dot'"
      :indicator-dots="true"
      :circular="true"
      :autoplay="true"
      interval="5000"
      duration="500"
    >
      <swiper-item v-for="(item, index) in swiperList" :key="index" class="screen-swiper-item">
        <image :src="item.url" mode="aspectFill" v-if="item.type == 'image'" />
      </swiper-item>
    </swiper>
    <view class="car-contain">
      <view class="car-list-wrap">
        <view v-for="(item, index) in msgData" :key="index">
          <view class="cu-list menu" :class="[
      
       
		'msg-list'
      ]">
            <view class="cu-item">
              <view class="content cu-item-list">
                <text :class="['cuIcon-' + item.icon]" :style="{'color':item.color}"></text>
                <text class="text-grey">{{item.value}}</text>
                <text class="text-grey-text">{{item.text}}</text>
              </view>
              <!-- <text class="cuIcon-right text-grey"></text> -->
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      href: "https://uniapp.dcloud.io/collocation/pages?id=easycom",
      isLoad: true,
      swiperList: [
        {
          id: 0,
          type: "image",
          url: "../../static/images/banner01.jpg"
        },
        {
          id: 1,
          type: "image",
          url: "../../static/images/banner02.jpg"
        },
        {
          id: 2,
          type: "image",
          url: "../../static/images/banner03.jpg"
        }
      ],
      msgData: [
        {
          value: "系统公告",
          text: "一金购买超级跑车的人，需要经过车主认证",
          icon: "goodsfill",
          color: "#ffeb3b"
        },
        {
          value: "我的留言",
          text:
            "一金购买超级跑车的人，需要经过车主认证，一金购买超级跑车的人，需要经过车主认证，一金购买超级跑车的人，需要经过车主认证",
          icon: "goodsfill",
          color: "#00baad"
        }
      ],
      dotStyle: false,
      towerStart: 0,
      direction: ""
    };
  },
  methods: {
    navigateTo: function(item) {
      uni[item.isTabbar ? "switchTab" : "navigateTo"]({
        url: item.navigateUrl
      });
    },
    navigateToMenu: function(item) {
      uni[item.isTabbar ? "switchTab" : "navigateTo"]({
        url: item.navigateUrl
      });
    }
  }
};
</script>

<style lang="scss">
page {
  background: #406fa0;
  padding-bottom: 100rpx;
}
.cu-list.menu > .cu-item {
  background-color: #406fa0;
  color: #ffffff;
  /* margin-top: 20rpx; */
}
.panel-title {
  background-color: #406fa0;
  padding: 10rpx;
  /* margin: 5rpx; */
}
.text-grey {
  color: #ffffff;
}
.text-grey-text {
  color: #fff;
  width: 70%;
  margin-left: 30rpx;
}
.cu-item-list {
  display: flex;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 20rpx 0;
}
</style>
